<template>
  <div class="banxin">
    <div class="banner">
      <p class="title">
        <span>首页</span>/
        <span class="active">全部礼品</span>
      </p>
      <div class="banner_tu">
        <img src="../assets/images/products/banner.png" alt="" />
        <ul class="sort">
          <li class="bold">排序：</li>
          <li>全部</li>
          <li>我能兑换的</li>
          <li>0-500分</li>
          <li>500- 1000分</li>
          <li>1000-150</li>
        </ul>
        <ul class="classify">
          <li class="bold">分类：</li>
          <li>全部</li>
          <li>实物商品</li>
          <li>虚拟商品</li>
        </ul>
      </div>
    </div>
    <!-- <ProductList :arr="arr"/> -->
    <LoadMore :bigarr="arr" :size="8">
      <ProductList slot-scope="scope" :arr="scope.smallarr" />
    </LoadMore>
  </div>
</template>

<script>
import ProductList from "@/components/Product.vue";
import { getGoodsApi } from "@/request/api";
export default {
  data() {
    return {
      arr: [],
    };
  },
  components: {
    ProductList,
  },
  created() {
    getGoodsApi().then((res) => {
      console.log(res);
      this.arr = res.data.data;
      console.log(this.arr);
    });
  },
};
</script>
 
<style lang = "less" scoped>
.banner {
  margin-top: 56px;
  width: 1258px;
  height: 342px;
  /* background: #5693e9; */
  .title {
    color: #ccc;
    font-size: 14px;
    padding-left: 20px;
    .active {
      color: #000;
    }
  }
  .banner_tu {
    width: 1266px;
    height: 287px;
    padding: 11px 30px 44px 22px;
  }
  ul {
    display: flex;
    justify-content: flex-start;
    width: 613px;
    height: 16px;
    font-size: 16px;
    color: #333333;
    line-height: 23px;
    .bold {
      font-weight: bold;
      margin-right: 0;
    }
    li {
      margin-right: 20px;
    }
  }
  .sort {
    margin: 22px 0;
  }
  .classify {
    margin-bottom: 18px;
  }
}
</style>